<template>
    <div class="ta-box">
        <div class="tabName">
          <span style="color:white;font-size: 40px" class="flex-center">
              <span>{{obj.tab.tName}}</span>
              <span class="tab-image-box">
                  <img :src="obj.tab.tImage" alt="暂无图片" v-show="obj.tab.tImage!=null &&obj.tab.tImage!==''">
              </span>
          </span>
        </div>

        <div class="tab-article-box">
                <ArticleCard :list="obj.articles" :tab-name="obj.tab.tName" class="tab-article"></ArticleCard>

        </div>
    </div>
</template>

<script>
    import {onMounted} from "@vue/runtime-core";
    import {useRoute} from "vue-router";
    import {reactive} from "@vue/reactivity";
    import ArticleCard from "@/components/article/ArticleCard";
    import axios from 'axios'
    import {goTop} from "@/assets/js/utils";

    export default {
        name: "TabArticles",
        components: {ArticleCard},
        setup(){

            let obj=reactive({
                tab:{
                    tId:0,
                    tName:"",
                    cId:0,
                    tImage:""
                },
                articles:[]
            })


            function getAxiosArticle() {
                return axios.get("/api/article/tab?id="+obj.tab.tId).then(resp=>resp.data)
            }

            function getAxiosTab(){
                const route=useRoute()
                const tId = route.query.tId;
                if(tId!=null){
                    return axios.get("/api/tab?id="+tId).then(resp=>resp.data)
                }

            }
            async function getTab(){
                const data = await getAxiosTab()

                if(data.code===200){
                    obj.tab=data.data

                }
            }

            async function getArticles() {
                const data = await getAxiosArticle()
                if(data.code===200){
                    obj.articles=data.data.list

                }
            }



            onMounted(async ()=>{
                 await getTab()
                 await getArticles()
                goTop()
            })
            return{
                obj
            }
        }
    }
</script>

<style scoped lang="less">

    @Ta-width:1000px;
    .ta-box{
        width: 100%;
        min-height: 2000px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--theme-color);

        .tabName{

            width: @Ta-width;
            margin-top: 80px;
            margin-bottom: 50px;

            .tab-image-box{
                display: inline-block;
                width: 110px;
                height: 110px;
                border-radius: 50%;
                overflow: hidden;
                margin-left: 30px;
                box-shadow: 0 0 50px 0;
                background-color: white;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;

                }
            }
        }
        .tab-article-box{
            width: @Ta-width;
            padding: 0 100px 0 100px;
            .tab-article{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>